﻿@using AbpZeroTemplate.Web.Areas.AppAreaName.Models.Layout
@using AbpZeroTemplate.Web.Areas.AppAreaName.Views.Shared.Components.AppAreaNameSideBar
@using AbpZeroTemplate.Web.Theme
@inject IUiThemeCustomizer UiThemeCustomizer
@model MenuViewModel
@{

}

<div class="m-container m-container--responsive m-container--full-height m-page__container @(UiThemeCustomizer.LayoutType == "boxed" ? "m-container--xxl":"")">
    <div class="m-stack m-stack--ver m-stack--desktop">
        <!-- begin::Horizontal Menu -->
        <div class="m-stack__item m-stack__item--middle m-stack__item--fluid">
            <button class="m-aside-header-menu-mobile-close  m-aside-header-menu-mobile-close--skin-light " id="m_aside_header_menu_mobile_close_btn">
                <i class="la la-close"></i>
            </button>
            <nav id="m_header_menu" class="m-header-menu m-aside-header-menu-mobile m-aside-header-menu-mobile--offcanvas  m-header-menu--skin-dark m-header-menu--submenu-skin-light m-aside-header-menu-mobile--skin-light m-aside-header-menu-mobile--submenu-skin-light "
                 aria-label="@L("TopMenu")">
                <ul class="m-menu__nav  m-menu__nav--submenu-arrow" 
                    role="menubar" 
                    aria-label="@L("TopMenu")">
                    @for (var i = 0; i < Model.Menu.Items.Count; i++)
                    {
                        var menuItem = Model.Menu.Items[i];
                        @Html.Partial("Components/AppAreaNameMenu/_TopUserMenuItem", new UserMenuItemViewModel
                        {
                            MenuItem = menuItem,
                            MenuItemIndex = i,
                            RootLevel = true,
                            CurrentPageName = Model.CurrentPageName
                        })
                    }
                </ul>
            </nav>
        </div>
        <!-- end::Horizontal Menu -->
    </div>
</div>